import React from 'react';
import {Form, Input, Select, DatePicker, Button, Space} from "antd";
import './index.less'
const {RangePicker} = DatePicker
interface propsType{
    subName: string;
    subMoney: number;
    subRAM:string;
}
function SearchForm(props) {
    let {RAMOptions,add,toSearch} = props
    let subRAM = ''
    const [searchForm] = Form.useForm<propsType>(props.row);
    const restore = () => {
        searchForm.resetFields()
    }
    const toAdd = () => {
        searchForm.resetFields()
        add()
    }
    const toQuery = () => {
      let data = searchForm.getFieldsValue()
      toSearch(data)
    }
    const subRAMChange = (value) => {
      console.log('subRAMChange----',value)
    }
    return (
        <Form
            form={searchForm}
            labelCol={{span: 6, offset: 0}}
            wrapperCol={{ flex: 4 }}
            layout="inline"
        >
            <Form.Item label="名称:" name="subName">
                <Input style={{ width: '190px' }}/>
            </Form.Item>
            <Form.Item label="内存:" name="subRAM">
                <Select
                    value={subRAM}
                    style={{ width: '190px' }}
                    onChange={subRAMChange}
                    options={RAMOptions}
                />
            </Form.Item>
            <Form.Item label="金额:" name="subMoney">
                <Input style={{ width: '190px' }}/>
            </Form.Item>
            <Form.Item wrapperCol={{flex: 4}}>
                <Space>
                    <Button onClick={restore}>
                        重置
                    </Button>
                    <Button className="successBtn" onClick={toAdd}>
                       新增
                    </Button>
                    <Button type="primary" onClick={toQuery}>
                        查询
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
}

export default SearchForm;
